import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects

Popup {
    signal selectItem(var item)
    id: root
    visible: true
    anchors.centerIn: Overlay.left
    implicitWidth: 430
    implicitHeight: 430

    background: Rectangle {
        radius: 12
        layer.enabled: true
        layer.effect: DropShadow {
            color: "#40000000"
            radius: 12
            samples: 25
            verticalOffset: 3
            horizontalOffset: 0
        }
    }

    Column {
        Item {
            width: 400
            height: root.height - p.height
            GridView {
                id: grid
                anchors.fill: parent
                cellWidth: 40
                cellHeight: 40
                Component {
                    id: contactDelegate
                    Rectangle {
                        id:myItem
                        radius: 2
                        width: grid.cellWidth
                        height: grid.cellHeight
                        Text {
                            text: modelData
                            font.pixelSize: 25
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            width: grid.cellWidth
                            height: grid.cellHeight
                            states: [
                                State {
                                    name: "hovered"
                                    when: mouseArea.containsMouse
                                    PropertyChanges {
                                        target: myItem
                                        color: '#eaeaea'
                                    }
                                }
                            ]
                            MouseArea {
                                id:mouseArea
                                anchors.fill: parent
                                hoverEnabled: true
                                onClicked: {
                                    console.log("Selected:", modelData)
                                    selectItem(modelData)
                                    root.close()
                                }
                            }
                        }
                    }
                }
                model:  [
                    "😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣", "😊", "😇",
                    "🥰", "😍", "😘", "😗", "😙", "😚", "☺️", "😌", "😏", "😉",
                    "😋", "😛", "😜", "🤪", "😝", "🤑", "🤗", "🤭","😷","😴" ,
                    "🤫", "🤔", "🤨", "😐", "😑", "😶", "😏", "😒", "😪", "🤤",
                    "🙄", "😬", "🤥", "😌", "😔"
                  ]

                delegate:contactDelegate
                focus: true
                clip: true
            }
        }

        Item {
            id: p
            width: 400
            height: 35
        }
    }
}



